<template>
  <div class="list">
    <ul>
      <li v-for="(v, i) in data" :key="v.id">
        <div class="list-item" :class="[ (i % 2) ? 'item-img-left' : 'item-img-right' ]">
          <div class="item-cover">
            <a :href="'/view/' + v.id">
              <img :src="v.imageLink" :alt="v.imageName" :title="v.imageName">
            </a>
          </div>
          <div class="item-date"><icon name="clock"/> {{v.createTime}}</div>
          <div class="item-body">
            <div class="item-title">
              <a :href="'/view/' + v.id">{{ v.title }}</a>
            </div>
            <div class="item-intr">
              <a :href="'/view/' + v.id">
                {{ v.articleDesc }}
              </a>
            </div>
          </div>
          <div class="item-info">
            <span><icon name="eye"/> {{ v.views }}</span>
            <span><icon name="comment"/> {{ v.commentCount }}</span>
            <span><icon name="tags"/> {{ v.tagText }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ListItem',
  data: function () {
    return {
      pageNo: 1,
      pageSize: 10,
      data: [],
      scrollHeight: 0,
      currentLazyLoad: true
    }
  },
  mounted () {
    this.$http.get(`api/article/get?pageNo=${this.pageNo}&pageSize=${this.pageSize}`).then(res => {
      this.data = res.data.page.records
      window.addEventListener('scroll', this.handleScroll)
    })
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      const a = document.documentElement.scrollTop === 0 ? document.body.clientHeight : document.documentElement.clientHeight
      const b = document.documentElement.scrollTop === 0 ? document.body.scrollTop : document.documentElement.scrollTop
      const c = document.documentElement.scrollTop === 0 ? document.body.scrollHeight : document.documentElement.scrollHeight
      if (b !== 0) {
        if ((c - (a + b) <= 10) && (a + b >= this.scrollHeight) && this.currentLazyLoad) {
          this.currentLazyLoad = false
          this.$http.get(`api/article/get?pageNo=${++this.pageNo}&pageSize=${this.pageSize}`).then(res => {
            if (res.code === 200) {
              res.data.page.records.forEach(v => this.data.push(v))
              this.pageNo = res.data.page.current
              this.currentLazyLoad = true
            }
          })
          this.scrollHeight = (a + b)
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.list {
  margin: 20px auto;
  width: 60%;
  .list-item {
    border: 1px solid #ABABAB;
    height: 240px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 3px -3px 10px 0px #ABABAB;
    position: relative;
    .item-cover {
      overflow: hidden;
      height: 240px;
      width: 320px;
      position: relative;
      img {
        border: none;
        height: 240px;
        position: absolute;
        top: 0;
        left: -20%;
      }
    }
    .item-date {
      background-color: pink;
      padding: 3px 10px;
      border-radius: 10px;
      position: absolute;
      color: #FFFFFF;
      font-size: 14px;
      font-family: "Comic Sans MS",serif;
    }
  .item-body {
    position: relative;
    overflow: auto;
    .item-title {
      margin: 50px 30px 10px 30px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      a {
        color: #1f2d3d;
        font-size: 20px;
      }
      a:hover {
        color: #3f5e5e;
      }
    }
    .item-intr {
      text-align: center;
      margin: 10px 30px 10px 30px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
      a {
        color: #4c4948;
        line-height: 28px;
        font-size: 15px;
        font-family: Arial, Helvetica, sans-serif;
      }
    }
  }
    .item-info {
      position: absolute;
      span {
        margin-right: 20px;
        font-size: 14px;
        font-family: "Comic Sans MS",serif;
      }
    }
  }
  .list-item:hover {
    transform: scale(1.05);
    transition: all .4s;
  }
}
.item-img-left {
  .item-cover {
    float: left;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  .item-date {
    right: 10px;
    top: 10px;
  }
  .item-info {
    bottom: 15px;
    right: 20px;
  }
}
.item-img-right {
  .item-cover {
    float: right;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .item-date {
    left: 10px;
    top: 10px;
  }
  .item-info {
    bottom: 15px;
    left: 20px;
  }
}
</style>
